<template>
  <div>
    <div style="margin: 20px">
      <!--v-if="$hasBP('btn.User.add')"-->
      <el-button type="primary" @click="isAdd = true">添 加 项 目</el-button>
      <!--v-if="$hasBP('btn.User.remove')"-->
      <el-button type="danger" @click="deletByIds">批量删除</el-button>
      <el-button type="danger" @click="outputExcel">导出</el-button>
    </div>
    <!-- 表格 -->
    <el-card style="margin: 20px">
      <div>
        <el-table :data="projectList" style="width: 100%; margin-bottom: 20px" border
          @selection-change="handleSelectionChange">
          <!-- <el-button type="selection" icon="el-icon-plus" style="margin-left: 20px"></el-button> -->

          <el-button type="primary" icon="el-icon-plus" style="margin-left: 20px">添加</el-button>
          <el-table-column type="selection" align="center" width="60">
          </el-table-column>
          <el-table-column type="index" label="序号" align="center" width="60">
          </el-table-column>
          <el-table-column prop="name" label="项目名称" width="150"> </el-table-column>
          <el-table-column label="负责人" prop="leader" width="120">
          </el-table-column>
          <el-table-column label="项目状态"  width="120">
            <template v-slot = '{row}'>
                <span>{{ row.status===1? '执行中':'未开始' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime">
          </el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="{ row }">
            <HintButton title="开始" :icon="row.status===1? 'el-icon-video-pause':'el-icon-video-play'" size="mini" type="primary"
               ></HintButton>
            <HintButton title="完成" icon="el-icon-folder-checked" size="mini" type="primary"
               ></HintButton>
              <HintButton title="修改" icon="el-icon-edit" size="mini" type="primary" name="修改"
                @click="editHandler(row)"></HintButton>
              <HintButton title="删除" icon="el-icon-delete" size="mini" name="删除" type="danger"
                @click="deleteHandler(row)"></HintButton>
              <HintButton @click="projectInfo(row)" title="详情" icon="el-icon-info" size="mini" name="详情" type="info"></HintButton>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination @size-change="" @current-change="" :current-page="page" :page-sizes="[3, 6, 9, 12]"
          :page-size="limit" layout="prev, pager,next,jumper,->,sizes,total " :total="total"
          style="text-align: center; margin-right: 50px">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog title="添加项目" :visible="isAdd" :before-close="resetRoleData">
      <el-form label-width="100px">
        <el-form-item label="	负责人">
          <el-input type="text" placeholder="请输入负责人" v-model="project.leader"></el-input>
        </el-form-item>
        <el-form-item label="	项目名称">
          <el-input type="text" placeholder="请输入项目名称" v-model="project.name"></el-input>
        </el-form-item>
        <el-form-item label="团队成员">
          <el-input type="text" placeholder="请输入团队成员" v-model="project.number"></el-input>
        </el-form-item>
        <el-form-item label="计划完成时间">
          <div class="block">
            <el-date-picker v-model="project.proEndTime" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="计划开始时间">
          <div class="block">
            <el-date-picker v-model="project.proStartTime" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="状态">
          <el-input type="text" placeholder="请输入状态" v-model="project.status"></el-input>
        </el-form-item>
        <el-form-item label="测试人员">
          <el-input type="text" placeholder="请输入测试人员" v-model="project.testNumber"></el-input>
        </el-form-item>

      </el-form>
      <div style="position:absolute; bottom:5px; right:42%">
        <el-button type="primary" @click="assignRole">保存</el-button>
        <el-button @click="resetRoleData">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改项目" :visible="isEdit" :before-close="editClose">
      <el-form label-width="100px" style="margin-bottom: 50px;">
        <el-form-item label="	负责人">
          <el-input type="text" placeholder="请输入负责人" v-model="editMap.leader"></el-input>
        </el-form-item>
        <el-form-item label="	项目名称">
          <el-input type="text" placeholder="请输入项目名称" v-model="editMap.name"></el-input>
        </el-form-item>
        <el-form-item label="团队成员">
          <el-input type="text" placeholder="请输入团队成员" v-model="editMap.number"></el-input>
        </el-form-item>
        <el-form-item label="计划完成时间">
          <div class="block">
            <el-date-picker v-model="editMap.proEndTime" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="计划开始时间">
          <div class="block">
            <el-date-picker v-model="editMap.proStartTime" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="测试人员">
          <el-input type="text" placeholder="请输入测试人员" v-model="editMap.testNumber"></el-input>
        </el-form-item>

      </el-form>
      <div style="position:absolute; bottom:5px; right:42%;">
        <el-button type="primary" @click="saveEdit">保存</el-button>
        <el-button @click="isEdit = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="项目详情" :visible="isInfo" :before-close="()=>{isInfo = false}">
      <el-form label-width="100px" style="margin-left: 20px;">
        <el-form-item label="	负责人">
          <span>： {{ editMap.leader||'暂无' }}</span>
        </el-form-item>
        <el-form-item label="	项目名称">
          <span>： {{ editMap.name||'暂无' }}</span>
        </el-form-item>
        <el-form-item label="团队成员">
          <span>： {{ editMap.number||'暂无' }}</span>
        </el-form-item>
        <el-form-item label="计划完成时间">
          <span>： {{ editMap.proEndTime||'暂无' }}</span>
        </el-form-item>
        <el-form-item label="计划开始时间">
          <span>： {{ editMap.proStartTime||'暂无' }}</span>
        </el-form-item>
        <el-form-item label="测试人员">
          <span>： {{ editMap.testNumber||'暂无' }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import ExportJsonExcel from 'js-export-excel';
export default {
  name: 'Project',
  data() {
    return {
      page: 1,
      limit: 5,
      total: 20,
      isAdd: false,
      isEdit:false,
      isInfo:false,
      editMap:{},
      projectList: [],
      project: {
      },
      isBegin:false
    }
  },
  methods: {
    beginProject(){

    },
   async saveEdit(){
     await this.$api.project.updateProject(this.editMap)
      this.$message({
        type: 'success',
        message: '修改成功'
      })
      this.isEdit = false
      this.getProjectList()
    },
    editHandler(row){
      this.editMap = {...row}
      this.isEdit = true
    },
    projectInfo(row){
      this.editMap = {...row}
      this.isInfo =true
    },
    editClose(){
      this.isEdit =false
    },
   async deletByIds(){
     await this.$api.project.deleteBatch(this.ids)
      this.getProjectList()
    },
    handleSelectionChange(e) {
       this.ids = e.map(item => item.pid)
    },
    async assignRole() {
      await this.$api.project.saveProject(this.project)
      this.$message({
        type: 'success',
        message: '添加成功'
      })
      this.getProjectList()
    },
    resetRoleData() {
      this.isAdd = false
      this.project = {}
    },
    async deleteHandler(row) {
      console.log(row);
      await this.$api.project.deleteProject(row.pid)
      this.$message('删除成功')
      this.getProjectList()
    },
    outputExcel() {
      // 表格数据
      const data = [...this.projectList];
      // excel导出的数据
      const sheetData = [];
      // excel导出的需要的对象
      const option = {};
      if (data && data.length > 0) {
        // 循环数组表格的每一行数据进行导出的格式整理
        for (const item of data) {
          const obj = {
            项目名称: item.name,
            负责人: item.leader,
            创建时间: item.createTime,
          };
          sheetData.push(obj);
        }
      }
      // 文件名
      option.fileName = '项目列表';
      option.datas = [
        {
          // excel表体数组
          sheetData,
          sheetName: 'sheet',
          sheetFilter: [
            '项目名称',
            '负责人',
            '创建时间',
          ],
          // excel表头数组
          sheetHeader: [
            '项目名称',
            '负责人',
            '创建时间',
          ]
        }
      ];
      // 创建导出excel对象
      const toExcel = new ExportJsonExcel(option);
      // 导出方法
      toExcel.saveExcel();
    },
    getProjectList(){
      this.$api.project.getProjectInfo(this.page, this.limit).then(res => {
      this.projectList = res.data.items
      console.log(res);
    })
    }
  },
  mounted() {
    this.getProjectList()
  }
}
//   [
//     {
//         "pid": 1,
//         "name": "一标六实产品",
//         "leader": "刘钰阁",
//         "proStartTime": "2023-04-01T10:09:57.000+00:00",
//         "proEndTime": "2023-04-26T10:10:02.000+00:00",
//         "status": 2,
//         "number": "刘钰阁",
//         "testNumber": "威威",
//         "createTime": "2023-04-10T10:12:05.946+00:00",
//         "updateTime": "2023-04-10T13:24:43.502+00:00"
//     }
// ]
</script>

<style lang="less" scoped></style>